<!-- html -->
<template>
  <!-- <el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="#" width="50" align="center" prop="id" />
      <el-table-column label="商品类别" width="600" align="center" prop="name" />
      <el-table-column label="创建人" width="300" align="center" prop="createBy" />
      <el-table-column label="创建时间" width="300" align="center" prop="createTime" />
      <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" title="编辑" icon="Edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['basic:category:edit']"></el-button>
          <el-button link type="primary" title="删除" icon="Delete" @click="handleDelete(scope.row)"
            v-hasPermi="['basic:category:remove']"></el-button>
        </template>
</el-table-column>
</el-table> -->
  <el-table 
      v-if="refreshTable" 
      v-loading="loading" 
      :data="categoryList" 
      row-key="id" 
      :default-expand-all="isExpandAll"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
    <el-table-column label="分类名称" prop="name" />
    <el-table-column label="创建时间" align="center" prop="createTime" />
    <el-table-column label="创建人" align="center" prop="createBy" />
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template #default="scope">
        <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
          v-hasPermi="['basic:category:edit']">编辑</el-button>
        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
          v-hasPermi="['basic:category:remove']">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<!-- 
      ts
      setup 支持setup语法糖
 -->
<script lang="ts" setup>
import { Ref, defineProps, defineEmits, getCurrentInstance, toRefs } from 'vue';

let proxy = getCurrentInstance()

//接收父组件参数
const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  categoryList: {
    type: Array,
    default: null
  },
  isExpandAll: {
    type: Boolean,
    default: false
  },
  refreshTable: {
    type: Boolean,
    default: false
  }
});

//定义事件
const emits = defineEmits(['handleUpdate', 'handleDelete'])

let { loading, categoryList } = toRefs(props)

//修改
let handleUpdate = (row) => {
  //调用父组件方法
  emits('handleUpdate', row)
};
//删除
let handleDelete = (row) => {
  //调用父组件函数
  emits('handleDelete', row)
}
</script>

<!-- css样式 -->
<style scoped></style>